<template>
  <div>
    <div id="container"></div>
    <div id="sliders">
      <table>
        <tr>
          <td>α 角（内旋转角）</td>
          <td>
            <input id="alpha" type="range" min="0" max="45" value="15" />
            <span id="alpha-value" class="value"></span>
          </td>
        </tr>
        <tr>
          <td>β 角（外旋转角）</td>
          <td>
            <input id="beta" type="range" min="-45" max="45" value="15" />
            <span id="beta-value" class="value"></span>
          </td>
        </tr>
        <tr>
          <td>深度</td>
          <td>
            <input id="depth" type="range" min="20" max="100" value="50" />
            <span id="depth-value" class="value"></span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  //部件
  components: {},
  //静态
  props: {},
  //对象内部的属性监听，也叫深度监听
  watch: {},
  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {},
  //方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    initChart() {
      var chart = new Highcharts.Chart({
        chart: {
          renderTo: "container",
          type: "column",
          options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 25,
            viewDistance: 25,
          },
        },
        title: {
          text: "图像识别分类统计",
        },
        subtitle: {
          text: "可通过滑动下方滑块测试",
        },
        plotOptions: {
          column: {
            depth: 50,
          },
        },
        xAxis: {
          categories: ["魔方", "国丙", "立方体", "玩具", "书本"],
        },
        yAxis: {
          title: {
            text: null,
          },
        },
        series: [
          {
            name: "类别",
            data: [99.5168, 79.4165, 41.3972, 20.1287, 0.0],
          },
        ],
      });
      // 将当前角度信息同步到 DOM 中
      var alphaValue = document.getElementById("alpha-value"),
        betaValue = document.getElementById("beta-value"),
        depthValue = document.getElementById("depth-value");
      function showValues() {
        alphaValue.innerHTML = chart.options.chart.options3d.alpha;
        betaValue.innerHTML = chart.options.chart.options3d.beta;
        depthValue.innerHTML = chart.options.chart.options3d.depth;
      }
      // 监听 sliders 的变化并更新图表
      $("#sliders input").on("input change", function () {
        chart.options.chart.options3d[this.id] = this.value;
        showValues();
        chart.redraw(false);
      });
      showValues();
      // var chart = Highcharts.chart('chart_container',{
      // chart: {
      // 		type: 'column',
      // 		margin: 75,
      // 		options3d: {
      // 				enabled: true,
      // 				alpha: 10,
      // 				beta: 25,
      // 				depth: 70,
      // 				viewDistance: 100,      // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
      // 				frame: {                // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
      // 						// 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
      // 						// side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
      // 						bottom: {
      // 								size: 10
      // 						},
      // 						side: {
      // 								size: 1,
      // 								color: 'transparent'
      // 						},
      // 						back: {
      // 								size: 1,
      // 								color: 'transparent'
      // 						}
      // 				}
      // 		},
      // },
      // title: {
      // 		text: '图像识别统计图'
      // },
      // subtitle: {
      // 		text: ''
      // },
      // plotOptions: {
      // 		column: {
      // 				depth: 25
      // 		}
      // },
      // xAxis: {
      // 		categories: ['魔方', '国丙', '立方体', '玩具', '书本']
      // },
      // yAxis: {
      // 		title: {
      // 				text: null
      // 		}
      // },
      // series: [{
      // 		name: '准确率',
      // 		data: [99.5168, 79.4165, 41.3972, 20.1287, 0.0]
      // }],
      // });
    },
    // initChart() {
    //   var chart = Highcharts.chart("chart_container", {
    //     chart: {
    //       type: "pie",
    //       options3d: {
    //         enabled: true,
    //         alpha: 45,
    //         beta: 0,
    //       },
    //     },
    //     title: {
    //       text: "图像识别统计图",
    //     },
    //     tooltip: {
    //       pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
    //     },
    //     plotOptions: {
    //       pie: {
    //         allowPointSelect: true,
    //         cursor: "pointer",
    //         depth: 35,
    //         dataLabels: {
    //           enabled: true,
    //           format: "{point.name}",
    //         },
    //       },
    //     },
    //     series: [
    //       {
    //         type: "pie",
    //         name: "图像识别占比",
    //         data: [
    //           ["魔方", 99.5168],
    //           ["国丙", 79.4165],
    //           {
    //             name: "立方体",
    //             y: 41.3972,
    //             sliced: true,
    //             selected: true,
    //           },
    //           ["玩具", 20.1287],
    //           ["书本", 0.0],
    //         ],
    //       },
    //     ],
    //   });
    // },
  },
  //请求数据
  created() {},
  mounted() {
    this.initChart();
  },
};
</script>

<style scoped>
</style>
